import React, { useState, useEffect, useCallback, useRef } from 'react';
import { connect } from 'dva';
import { Skeleton, Radio, Spin } from 'antd';
import style from './board.css';
import LineChart from './components/LineChart';
import CustomTable from './components/CustomTable';
import comBg from '../../../../public/board/com.jpg';
import gaugeBg from '../../../../public/board/gauge-bg.png';
// import CustomTable from './components/CustomTable';
import PieChart from './components/PieChart';
import RadarChart from './components/RadarChart';
import GaugeChart from './components/GaugeChart';
// import SymbolLineChart from './components/SymbolLineChart';
// import MultiLineChart from './components/MultiLineChart';
// import ScrollTable from './components/ScrollTable';
// import InfoList from './components/InfoList';

let infoList = [
    { icon:0, title:'累计供冷量', value:5.35, unit:'KW' },
    { icon:1, title:'本年综合平均能效', value:9560.74, unit:'' },
    { icon:2, title:'累计用电量', value:13190.37, unit:'kw'},
    { icon:3, title:'累计综合平均能效', value:5.35, unit:'' }
];

let paramList = [
    { title:'冷冻供水温度', value:9.0, unit:'℃'},
    { title:'冷却供水温度', value:20.0, unit:'℃'},
    { title:'湿球温度', value:28.0, unit:'℃'},
    { title:'冷却回水温度', value:30.0, unit:'℃'},
    { title:'冷冻回水温度', value:10.0, unit:'℃'},
    { title:'逼近度', value:15.0, unit:'℃'},
    { title:'冷冻水温差', value:15.0, unit:'℃'},
    { title:'冷却水温差', value:26.0, unit:'℃'}
];

function EnergyBoard({ dispatch, pv }){
    const { emcInfo, productInfo, tplInfo, monitorInfo, sceneInfo } = pv;
    const containerRef = useRef();
    const [timeType, setTimeType] = useState('2');
    useEffect(()=>{
        dispatch({ type:'pv/fetchEMCMonitor' });  
        dispatch({ type:'pv/fetchTplInfo' });
        dispatch({ type:'pv/fetchMonitorInfo'});
        dispatch({ type:'pv/fetchSceneInfo'});
        return ()=>{
        }
    },[]);
    useEffect(()=>{
        dispatch({ type:'pv/fetchProductInfo', payload:{ time_type:timeType }})
    },[timeType])
    
    const handleDispatch = useCallback((action)=>{
        dispatch(action);
    },[]);
    
    return (
        <div className={style['container']} ref={containerRef}>
            <div className={style['head-container']}>
                <div className={style['head-container-title']}>高效机房大屏</div>
            </div>
            <div className={style['content-container']}>
                {/* <div className={style['content-bg']}></div> */}
                <div className={style['main-content']}>
                    {/* 顶部 38%*/}
                    <div style={{ height:'70%', paddingBottom:'0.5rem' }}>             
                        <div className={style['card-wrapper']} style={{ width:'30%' }}>
                            <div style={{ height:'40%', paddingBottom:'0.5rem' }}>
                                <div className={style['card-container']}>
                                    <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                    
                                    <div className={style['card-title']}>
                                        <span>冷站用能指标</span>
                                    </div>
                                    <div className={style['card-content']}>
                                        <div className={style['flex-container']}>
                                            {
                                                infoList.map((item)=>(
                                                    <div className={style['flex-item']} style={{ width:'50%' }} key={item.title}>
                                                        <div className={style['flex-item-icon']} style={{
                                                            backgroundPosition:`-${item.icon*60}px 0px`
                                                        }}></div>
                                                        <div className={style['flex-item-content']}>
                                                            <div>{ item.title }</div>
                                                            <div className={style['value']}>{ item.value + item.unit }</div>
                                                        </div>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style={{ height:'60%' }}>
                                <div className={style['card-container']}>
                                    <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                    <div className={style['card-title']}>
                                        <span>项目概况</span>
                                    </div>
                                    <div className={style['card-content']}>
                                        <div style={{ 
                                            height:'68%',
                                            backgroundRepeat:'no-repeat',
                                            backgroundSize:'cover',
                                            backgroundImage:`url(${comBg})`
                                        }}>
                                            
                                        </div>
                                        <div style={{ height:'32%' }}>
                                            <div className={style['flex-container']}>
                                                <div className={style['flex-item']} style={{ width:'33.3%' }}>
                                                    <div className={style['flex-item-icon']} style={{
                                                        backgroundPosition:'-240px 0px'
                                                    }}></div>
                                                    <div className={style['flex-item-content']}>
                                                        <div>室外温度</div>
                                                        <div className={style['value']}>28.5℃</div>
                                                    </div>
                                                </div>
                                                <div className={style['flex-item']} style={{ width:'33.3%' }}>
                                                    <div className={style['flex-item-icon']} style={{
                                                        backgroundPosition:'-300px 0'
                                                    }}></div>
                                                    <div className={style['flex-item-content']}>
                                                        <div>相对湿度</div>
                                                        <div className={style['value']}>21.0℃</div>
                                                    </div>
                                                </div>
                                                <div className={style['flex-item']} style={{ width:'33.3%' }}>
                                                    <div className={style['flex-item-icon']} style={{
                                                        backgroundPosition:'-360px 0'
                                                    }}></div>
                                                    <div className={style['flex-item-content']}>
                                                        <div>湿球温度</div>
                                                        <div className={style['value']}>19.3℃</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className={style['card-wrapper']} style={{ width:'40%', padding:'0 0.5rem' }}>
                            <div className={style['card-container']}>
                                <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                <div className={style['card-title']}>
                                    <span>冷站能效EER</span>
                                </div>
                                <div className={style['card-content']}>
                                    <div style={{
                                        width:'400px',
                                        height:'400px',
                                        left:'50%',
                                        top:'50%',
                                        transform:'translate(-50%, -50%)',
                                        position:'absolute',
                                        backgroundRepeat:'no-repeat',
                                        backgroundSize:'contain',
                                        backgroundPosition:'50% 50%',
                                        backgroundImage:`url(${gaugeBg})`
                                    }}>
                                    </div>
                                    <GaugeChart />

                                </div>
                                {/* 底部信息悬浮框 */}
                                <div className={style['float-container']}>
                                    <div className={style['float-item']}>
                                        <div style={{ fontSize:'2rem', fontWeight:'bold', lineHeight:'2rem', color:'#5aa21c' }}>1246.42</div>
                                        <div>实时供冷量(kw)</div>
                                    </div>
                                    <div className={style['float-item']}>
                                        <div style={{ fontSize:'2rem', fontWeight:'bold', lineHeight:'2rem', color:'#00eaff' }}>66</div>
                                        <div>系统负荷率(%)</div>
                                    </div>
                                    <div className={style['float-item']}>
                                        <div style={{ fontSize:'2rem', fontWeight:'bold', lineHeight:'2rem', color:'#fe9631' }}>211.56</div>
                                        <div>实时功率(kw)</div>
                                    </div>
                                </div>
                            </div>                
                        </div>
                        <div className={style['card-wrapper']} style={{ width:'30%' }}>
                            <div style={{ height:'40%', paddingBottom:'0.5rem' }}>
                                <div className={style['card-container']}>
                                    <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                    <div className={style['card-title']}>
                                        <span>运行参数</span>
                                    </div>
                                    <div className={style['card-content']}>
                                        <div className={style['flex-container']}>
                                            {
                                                paramList.map((item, index)=>(
                                                    <div className={style['flex-item']} key={index} style={{ width:'33.3%' }}>
                                                        <div className={style['flex-item-content']}>
                                                            <div>{ item.title }</div>
                                                            <div className={style['value']}>{ item.value + item.unit }</div>
                                                        </div>
                                                    </div>
                                                ))
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style={{ height:'60%' }}>
                                <div className={style['card-container']}>
                                    <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                    <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                    <div className={style['card-title']}>
                                        <span>分项指标 </span>
                                    </div>
                                    <div className={style['card-content']} style={{ paddingTop:'0.5rem' }}>
                                        <div style={{ height:'26%' }}>
                                            <CustomTable 
                                                columns={[{ title:'主机', dataIndex:'mach' }, { title:'冷冻水泵', dataIndex:'frozen' }, { title:'冷却水泵', dataIndex:'bump'}, { title:'冷却塔', dataIndex:'tower' } ]} 
                                                data={[
                                                    { mach:33.92, frozen:9.40, bump:8.80, tower:0.00 }
                                                ]}
                                            />
                                        </div>
                                        <div style={{ height:'74%' }}>
                                            <div style={{ display:'inline-block', height:'100%', width:'50%' }}>
                                                <PieChart data={{}} />
                                            </div>
                                            <div style={{ display:'inline-block', height:'100%', width:'50%' }}>
                                                <RadarChart />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {/* 底部 */}
                    <div style={{ height:'30%' }}>
                        <div className={style['card-wrapper']} style={{ width:'30%' }}>
                            <div className={style['card-container']}>
                                <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                <div className={style['card-title']}>
                                    <span>供冷量趋势图</span>
                                </div>
                                <div className={style['card-content']}>
                                    <LineChart title='系统供冷量(KW)' color='rgba(132, 160, 255)' />
                                </div>
                            </div>
                        </div>
                        <div className={style['card-wrapper']} style={{ width:'40%', padding:'0 0.5rem' }}>
                            <div className={style['card-container']}>
                                <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                <div className={style['card-title']}>
                                    <span>能效EER趋势图</span>
                                </div>
                                <div className={style['card-content']}>
                                    <LineChart title='能效EER(KW/KW)' color='rgba(1, 233, 250)' />
                                </div>
                            </div>
                        </div>
                        <div className={style['card-wrapper']} style={{ width:'30%' }}>
                            <div className={style['card-container']}>
                                <div className={style['symbol'] + ' ' + style['top-left']}></div>
                                <div className={style['symbol'] + ' ' + style['top-right']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-left']}></div>
                                <div className={style['symbol'] + ' ' + style['bottom-right']}></div>
                                <div className={style['card-title']}>
                                    <span>系统功率趋势图</span>
                                </div>
                                <div className={style['card-content']} style={{ paddingTop:'0.5rem' }}>
                                    <LineChart title='实时功率(KW)' color='rgba(99, 176, 22)' />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
    )
}

export default connect(({ pv })=>({ pv }))(EnergyBoard);